<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <title>摄影圈-后台管理系统</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/zabuto_calendar.css">
    <link rel="stylesheet" type="text/css" href="js/gritter/css/jquery.gritter.css"/>
    <link rel="stylesheet" type="text/css" href="lineicons/style.css">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">
    <script src="js/chart-master/Chart.js"></script>
    <script src="js/underscore-noflect.js"></script>
</head>

<div>
    <header class="header black-bg">
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
        </div>
        <a href="index.html" class="logo"><b>摄影圈CMS</b></a>
        <div class="top-menu">
            <ul class="nav pull-right top-menu">
                <li>
                    <a class="logout" href="/exit">Logout</a>
                </li>
            </ul>
        </div>
    </header>
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <ul class="sidebar-menu" id="nav-accordion">
                <p class="centered">
                    <a href="profile.html"><img src="img/ui-sam.jpg" class="img-circle" width="60"></a>
                </p>
                <h5 class="centered"><%=username%></h5>
                <li id="userListBtn">
                    <a>
                        <i class="fa fa-dashboard"></i>
                        <span>用户列表</span>
                    </a>
                </li>
                <li id="goodFilmListBtn">
                    <a href="javascript:;">
                        <i class="fa fa-desktop"></i>
                        <span>佳片列表</span>
                    </a>
                </li>
                <li id="courseArticleBtn">
                    <a href="javascript:;">
                        <i class="fa fa-cogs"></i>
                        <span>教程文章</span>
                    </a>
                </li>
                <li id="userPhotoBtn">
                    <a href="javascript:;">
                        <i class="fa fa-book"></i>
                        <span>用户图片</span>
                    </a>
                </li>
            </ul>
        </div>
    </aside>
    <!--表格-->
    <div>
        <div class="main-content wrapper" id="userList">
            <h3><i class="fa fa-user-md"></i> 用户列表</h3>
            <div class="row">
                <div class="col-md-12 mt">
                    <div class="content-panel">
                        <table class="table table-hover">
                            <h4><i class="fa fa-gift"></i> 列表详情</h4>
                            <!--<hr>-->
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户账号</th>
                                <th>用户密码</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="userListArea">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-content wrapper" id="goodFilmList" style="display: none;">
            <h3><i class="fa fa-graduation-cap"></i> 佳片列表</h3>
            <div class="row">
                <div class="col-md-12 mt">
                    <div class="content-panel">
                        <table class="table table-hover">
                            <h4><i class="fa fa-gift"></i> 列表详情</h4>
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>图片标题</th>
                                <th>图片路径</th>
                                <th>发布日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="goodFilmListArea">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-content wrapper" id="courseArticle" style="display: none;">
            <h3><i class="fa fa-edit"></i>教程文章 </h3>
            <div class="row">
                <div class="col-md-12 mt">
                    <div class="content-panel">
                        <table class="table table-hover">
                            <h4><i class="fa fa-gift"></i> 列表详情</h4>
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>文章标题</th>
                                <th>阅读数</th>
                                <th>评论数</th>
                                <th>点赞数</th>
                                <th>发表日期</th>
                            </tr>
                            </thead>
                            <tbody id="courseArticleArea">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-content wrapper" id="userPhoto" style="display: none;">
            <h3><i class="fa fa-picture-o"></i> 用户图片</h3>
            <div class="row">
                <div class="col-md-12 mt">
                    <div class="content-panel">
                        <div class="input-group col-md-3" style="margin-top:0px;margin-left: 5px;margin-bottom: 20px">
                            <input type="text" id="userId" class="form-control" placeholder="请输入的查找的用户名"/>
                            <span class="input-group-btn">
                                <button id="searchInfoBtn" type="button" class="btn btn-theme">查找</button>
                            </span>
                        </div>
                        <table class="table table-hover">
                            <h4><i class="fa fa-gift"></i> 列表详情</h4>
                            <thead>
                            <tr>
                                <th>账号名</th>
                                <th>图片标题</th>
                                <th>图片内容</th>
                                <th>图片风格</th>
                                <th>图片地址</th>
                            </tr>
                            </thead>
                            <tbody id="userImgArea">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/jquery.sparkline.js"></script>

<!--common script for all pages-->
<script src="js/common-scripts.js"></script>

<script type="text/javascript" src="js/gritter/js/jquery.gritter.js"></script>
<script type="text/javascript" src="js/gritter-conf.js"></script>
<script src="js/sparkline-chart.js"></script>
<script src="js/zabuto_calendar.js"></script>

<!--前端模板-->
<script type="text/template" id="userListTemplate">
    <tr>
        <td>{{=_id}}</td>
        <td>{{=dengluming}}</td>
        <td>{{=mima}}</td>
        <td id="{{=_id}}" style="cursor: pointer" onclick="deleteMethod(id)">删除</td>
    </tr>
</script>
<!--前端模板-->
<script type="text/template" id="goodFilmListTemplate">
    <tr>
        <td>{{=post_id}}</td>
        <td>{{=title}}</td>
        <td>{{=url}}</td>
        <td>{{=published_at}}</td>
        <td style="cursor: pointer" onclick="deleteMethod(id)">删除</td>
    </tr>
</script>
<script type="text/template" id="courseArticleTemplate">
    <tr>
        <td>{{=post_id}}</td>
        <td>{{=title}}</td>
        <td>{{=views}}</td>
        <td>{{=comments}}</td>
        <td>{{=favorites}}</td>
        <td>{{=published_at}}</td>
    </tr>
</script>
<script type="text/template" id="userImgTemplate">
    <tr>
        <td>{{=dengluming}}</td>
        <td>{{=ImgTitle}}</td>
        <td>{{=ImgContent}}</td>
        <td>{{=ImgStyle}}</td>
        <td>{{=ImgPath}}</td>
    </tr>
</script>
<script type="text/javascript">
    //删除用户
    function deleteMethod(idname) {
        $.get("/deleteUser", {
            "deleteid": idname
        }, function (result) {
            if (result == "1") {
                alert("删除用户成功！");
                window.location.reload();
            } else {
                alert("删除用户失败！");
            }
        })
    }
    //注册过的用户
    var compiledR = _.template($("#userListTemplate").html());
    $.ajax({
        "url": "/showUserList",
        "type": "get",
        "success": function (result) {
            //result是一个数组
//                console.log(Array.isArray(result));
            console.log(result);
            iterator(0);
            //迭代器
            //这里防止ajax异步，必须使用迭代器
            function iterator(i) {
                if (i == result.length) {
                    //在这里书写请求完毕之后做的事情
                    return;  //不用继续迭代了
                }
                //组装模板
                var htmlstring = compiledR(result[i]);
                //添加DOM
                $("#userListArea").append($(htmlstring));
                iterator(i + 1);
            }
        }
    })
    //goodfilmlist
    function getImg(page) {
        $("#goodFilmListArea").html("");
        var compilehotImg = _.template($("#goodFilmListTemplate").html());
        //ajax服务，获取信息
        $.ajax({
            "url": "/hotImgData?page=" + page,
            "type": "get",
            "success": function (result) {

                if (result == "101") {
                    return;
                }
                var result1 = result.postList;
                iterator(0);
                function iterator(i) {
                    if (i == result1.length) {
                        //在这里书写请求完毕之后做的事情
                        return;  //不用继续迭代了
                    }

                    if (result1[i].title == null) {
                        iterator(i + 1);
                    } else {
                        //组装模板
                        var htmlstring = compilehotImg(result1[i]);
                        $("#goodFilmListArea").append($(htmlstring));
                        iterator(i + 1);
                    }

                }
            }
        })
    }

    //coursearticle
    function getArticle(page) {
        $("#courseArticleArea").html("");
        var compileArticle = _.template($("#courseArticleTemplate").html());
        $.ajax({
            "url": "/articleData?page=" + page,
            "type": "get",
            "success": function (result) {
                if (result == "101") {
//                    $("#loading").fadeOut();
//                    $("#loadEnd").css("display","block");
                    return;
                }
                var result1 = result.posts;
                iterator(0);
                //迭代器
                function iterator(i) {
                    if (i == result1.length) {
                        //在这里书写请求完毕之后做的事情
                        return;  //不用继续迭代了
                    }
                    //组装模板
                    var htmlstring = compileArticle(result1[i]);
                    //添加DOM
                    $("#courseArticleArea").append($(htmlstring));
                    iterator(i + 1);
                }
            }
        })
    }

    //userImg
    function getUserImg(dengluming) {
        var compileUserImg = _.template($("#userImgTemplate").html());
        $.ajax({
            "url": "/userImg?dengluming=" + dengluming,
            "type": "get",
            "success": function (result) {
                if (result == "101") {
                    return;
                }
                iterator(0);
                //迭代器
                function iterator(i) {
                    if (i == result.length) {
                        //在这里书写请求完毕之后做的事情
                        return;  //不用继续迭代了
                    }
                    //组装模板
                    var htmlstring = compileUserImg(result[i]);
                    //添加DOM
                    $("#userImgArea").append($(htmlstring));
                    iterator(i + 1);
                }
            }
        })
    }


    $("#userListBtn").click(function () {
        $("#userList").css("display", "block");
        $("#userList").siblings().css("display", "none");
    })

    $("#goodFilmListBtn").click(function () {
        getImg(0);
        $("#goodFilmList").css("display", "block");
        $("#goodFilmList").siblings().css("display", "none");
    })

    $("#courseArticleBtn").click(function () {
        getArticle(0);
        $("#courseArticle").css("display", "block");
        $("#courseArticle").siblings().css("display", "none");
    })

    $("#userPhotoBtn").click(function () {
//        getUserImg("房山")
        $("#userPhoto").css("display", "block");
        $("#userPhoto").siblings().css("display", "none");
        $("#searchInfoBtn").click(function () {
            var name=$("#userId").val();
            getUserImg(name);
        })
    })


</script>
</body>

</html>